<template>
	<view class="box">
		<u-collapse :accordion="true" :border="false" value="name">
			<u-collapse-item :title="item.title" :isLink="false" :clickable="false" v-for="(item,index) in data" :key="index"
				name="name" class="policy_box">
				<view class="info_list" v-for="(items,idex) in item.policy" :key="idex">
					<view class="info_item">
						<view class="">
							<text>{{items.title}}</text>
						</view>
						<view class="operating">
							<view class="fize" style="background-color: #3c9cff;" @click="info(items.id)">设置</view>
						</view>
					</view>
				</view>
				<view class="confirm" @click="new_add(item.id)">
					<u--text prefixIcon="plus" iconStyle="font-size: 38rpx; color: #ffffff; margin-right: 10rpx;"
						color="#ffffff" align="center" text="新增"></u--text>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: []
			}
		},
		onLoad() {
			this.getProduct()
		},
		methods: {
			info(id) {
				uni.navigateTo({
					url: '/pages/index/SetPolicy/Info?id=' + id
				})
			},
			new_add(id) {
				uni.navigateTo({
					url: '/pages/index/SetPolicy/new_add?id=' + id
				})
			},
			async getProduct() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getProduct'
				});
				uni.hideLoading();
				if (res.code == 200) {
					this.data = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F6FC;
	}
	.box {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.policy_box {
		margin-top: 20rpx;
		border: 1px #eeeeee solid;
		font-weight: 600;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		
		.confirm {
			margin-top: 20rpx;
			box-sizing: border-box;
			background-color: #018afe;
			border-radius: 15rpx;
			font-size: 28rpx;
			padding: 20rpx;
			color: #fff;
			text-align: center;
			transition: all 0.5s;
		}
	}


	.info_list:nth-child(1) {
		border-top: #eeeeee 1px solid;
	}

	.info_list {

		box-sizing: border-box;
		// margin-top: -10rpx;

		.info_item {
			margin-top: 20rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.operating {
				display: flex;
				justify-content: space-between;

				.fize {
					color: #fff;
					padding: 10rpx 30rpx;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>